import React from 'react'
import { withRouter } from 'react-router-dom'
import { getSongerLists } from '../../../api'
require('./container.css')
class Container extends React.Component {
    constructor() {
        super()
        this.state = {
            newSongerLists: [],
            newSongerPlays: []
        }
    }
    //获取歌手榜
    getSongerlists() {
        getSongerLists().then((res) => {
            // console.log(res)
            this.setState({
                newSongerLists: res.data.list.artists
            })
        })
    }
    componentWillMount() {
        this.getSongerlists()
    }
    render() {
        let { newSongerLists, newSongerPlays } = this.state
        console.log(newSongerPlays)
        // console.log(newSongerLists)
        let newSongerlis = newSongerLists.map(({ id, name, picUrl },index) => {
            return (
                <li className="newSongerdetails" key={id} onClick={() => {
                    this.props.history.push('/songerPlaylists', { id: id, picUrl: picUrl, name: name })
                }}>
                    <span className="songPlayRanking">{index+1}</span>
                    <img src={picUrl} alt="" className="newSongerImg" />
                    <span className="newSongerName">{name}</span>
                </li>
            )
        })
        return (
            <div className="container">
                <h1 className="newSongerTitle" >最新歌手榜</h1>
                <div className="newSongerdetail">
                    <ul className="newSongerShow">
                        {newSongerlis}
                    </ul>
                </div>
            </div>
        )
    }
}

export default withRouter(Container)